<template>
  <!-- 底部 -->
  <div id="forbidden">
    <p class="forbidden-msg">{{ showText }}</p>
  </div>
</template>

<script>
export default {
    name: 'my-forbidden',
    data () {
        return {
            timer: null, // settimeout
            showText: ''
        }
    },
    methods: {
        appear (content) {
            const _this = this

            this.showText = ''
            clearTimeout(this.timer)

            var speed = 100 // 设置定时的速度 越来越快
            var count = 1

            function changeContent () {
                _this.showText = content.substring(0, count) // 截取字符串
                count++

                if (count !== content.length + 1) {
                    speed -= 1
                    if (speed < 5) speed = 5

                    _this.timer = setTimeout(changeContent, speed)
                }
            }

            changeContent()
        }
    },
    mounted () {
        this.appear(
            '系统检测用户存在恶意访问，已被列入黑名单，无法访问网页！'
        )
    }
}
</script>

<style scoped>
#forbidden {
  width: auto;
  height: 100%;
  margin: 0px 5px 0px 5px;
  padding: 0px;
  color: #000;
  background-color: #fff;
}

.forbidden-msg {
  font-size: 25px;
  font-weight: 600;
  color: red;
  text-align: center;
}
</style>
